<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view :prop="optionData" id="echartsIndex" class="echarts"></view>
		<!--
		<button @click="changeOption">更新数据</button>
		-->
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>
<script>
	export default {
		data() {
			/*
			return {
				echartsData:[],
			}
			*/
		},
		props:{
			optionData:{
				type:Object,
				default:()=>{}
			}
		},
		methods: {
			
		}
	}
</script>
<script module="echartsIndex" lang="renderjs">
	let myChart
	//let currentEndValue = 0
	//let option = 
	export default {
		data(){
			return{
				option:{
					series: [
						{
							type: 'pie',
							radius: ['50%', '70%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 50,
								borderColor: '#fff',
								borderWidth: 2
							},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [
								{ 
									value: 216,
									itemStyle:{
										color: {
										    type: 'linear',
										    x: 0,
										    y: 0,
										    x2: 0,
										    y2: 1,
										    colorStops: [{
										            offset: 0,
										            color: "#3EE5C4", // 0% 处的颜色
										        },
										        {
										            offset: 1,
										            color: "#1DC691", // 0% 处的颜色
										        }
										    ],
										},
									}
								},
								{ 
									value: 54,
									itemStyle:{
										color: {
										    type: 'linear',
										    x: 0,
										    y: 0,
										    x2: 0,
										    y2: 1,
										    colorStops: [{
										            offset: 0,
										            color: "#FFC779", // 0% 处的颜色
										        },
										        {
										            offset: 1,
										            color: "#FFAF67", // 0% 处的颜色
										        }
										    ],
										},
									}
								},
								{ 
									value: 90,
									itemStyle:{
										color: {
										    type: 'linear',
										    x: 0,
										    y: 0,
										    x2: 0,
										    y2: 1,
										    colorStops: [{
										            offset: 0,
										            color: "#FF7B5F", // 0% 处的颜色
										        },
										        {
										            offset: 1,
										            color: "#FF5831", // 0% 处的颜色
										        }
										    ],
										},
									}
								},
							]
						}
					]
				}
			}
		},
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/js/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echartsIndex'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option);
				//console.log(option)
			},
			updateData(newValue, oldValue, ownerInstance, instance) {
				
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		width: 100%;
		height: 270rpx;
	}
</style>
